<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录 </title>
    <link rel="icon" href="./static/favicon.ico">
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./static/admin/css/login.css">
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/bootstrap/js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="login">
    <form>
        <h2>轻食美食后台系统</h2>
        <div class="form-group">
            <label>用户名</label>
            <input type="text" v-model="username" class="form-control form-control-lg">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" v-model="password" class="form-control form-control-lg" id="pwd">
        </div>
        <button type="button" :disabled="loading" @click="login" class="btn btn-primary btn-lg  btn-block">
            <span v-show="loading" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            立即登录
        </button>
    </form>

</div>

<script>
new Vue({
    el: '.login',
    data: {
        loading: false, // 锁
        username: '',
        password: '',
    },
    methods: {
        login: function() {
            this.loading = true;
            // 发送登录请求
                $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/user/inLogin",
                    contentType:'application/json',
                    data:JSON.stringify({
                        name:this.username,
                        password:this.password,
                    }),
                    success: function (res) {
                        if(res.status == 1 && res.root == 'root'){
                            window.localStorage.setItem('tokenRoot',res.token);
                            setTimeout(() => {
                                window.location.href = 'index.html';
                            }, 2000);
                        }else if(res.status == 1 && res.root == 'admin'){
                            alert('您的权限不够！');
                            return false;
                        }else {
                            alert('输入用户名或者密码错误！')
                            return false;
                        } 
                    }
                });
        },
    },
});

</script>

</body>
</html>
